//三级联动  
let province = document.querySelector("#province");
let city = document.querySelector("#city");
let area = document.querySelector("#area");      
let cityList,areaList;

citys.forEach((item,i) => {
    province.innerHTML += `<option>${item.provinceName}</option>`;
})

citys[0].mallCityList.forEach(item=>{
        city.innerHTML += `<option>${item.cityName}</option>`
})

citys[0].mallCityList[0].mallAreaList.forEach(item=>{
        area.innerHTML += `<option>${item.areaName}</option>`
})

province.onchange = function(){
    updataCity.call(this);
    updataArea.call(city);
}

city.onchange = function(){
    updataArea.call(this);
}

function updataCity(){
    city.innerHTML = "";
    cityList = citys[this.selectedIndex].mallCityList;
    cityList.forEach(item=>{
        city.innerHTML += `<option>${item.cityName}</option>`;
    })
}

function updataArea(){
    area.innerHTML = "";
    areaList = cityList[this.selectedIndex].mallAreaList;
    areaList.forEach(item=>{
        area.innerHTML += `<option>${item.areaName}</option>`;
    })
}